import React, { Component } from 'react'
import { Form, Input, Icon, Select, Button } from 'antd'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import { PROTOCOL_TYPE } from 'constants'

import PropTypes from 'prop-types'

import Style from './edit.css'

const { Item } = Form
const { Option } = Select

class edit extends Component {
  static propTypes = {
    loading: PropTypes.bool,
    protocolDetail: PropTypes.object,
    addOrUpdateProtocol: PropTypes.func,
    getProtocolDetail: PropTypes.func
  }
  constructor (props) {
    super(props)
    this.state = {}
  }

  componentDidMount () {
    this.init()
  }

  init = () => {
    const { match, getProtocolDetail } = this.props
    getProtocolDetail(match.params)
  }

  handleSubmit = () => {
    const { form, protocolDetail } = this.props
    form.validateFields((err, values) => {
      if (!err) {
        this.props.addOrUpdateProtocol({
          id: protocolDetail.id,
          title: values.title,
          describe: values.describe,
          categoryCode: values.categoryCode,
          content: values.content.toHTML()
        }).then(() => {
          this.props.router.go(-1)
        })
      }
    })
  }

  render () {
    const { form, loading, protocolDetail } = this.props
    const { getFieldDecorator } = form
    const layoutForm = {
      labelCol: {
        span: 4
      },
      wrapperCol: {
        span: 20
      }
    }
    const isReady = protocolDetail && Object.keys(protocolDetail).length
    if (!isReady) return null

    const editorState = BraftEditor.createEditorState(protocolDetail.content)

    return (
      <Form {...layoutForm}>
        <div className={Style['content-box']}>
          <div className={Style['wrap']} >
            <div className={Style['wrap-item']}>
              <div className={Style['side']}>
                <div className={Style['title']}>
                  <Icon type='tag' />
                  <span>基本设置</span>
                </div>
              </div>
              <div className={Style['content']}>
                {/* <Form {...layoutForm}> */}
                <Item label='协议标题'>
                  {getFieldDecorator('title', {
                    rules: [
                      { required: true, message: '请输入协议标题' }
                    ],
                    initialValue: protocolDetail.title
                  })(<Input style={{ width: 250 }} />)}
                </Item>
                <Item label='协议描述'>
                  {getFieldDecorator('describe', {
                    rules: [
                      { required: true, message: '请输入协议描述' }
                    ],
                    initialValue: protocolDetail.describe
                  })(<Input style={{ width: 250 }} />)}
                </Item>
                <Item label='协议分类'>
                  {getFieldDecorator('categoryCode', {
                    initialValue: protocolDetail.categoryCode
                  })(
                    <Select style={{ width: 250 }}>
                      {Object.keys(PROTOCOL_TYPE).map(n => <Option key={n} value={n}>{PROTOCOL_TYPE[n]}</Option>)}
                    </Select>
                  )}
                </Item>
                {/* <Item label='显示设置'>
                  {getFieldDecorator('a', {

                  })(<Switch defaultChecked />)}
                </Item> */}
                {/* </Form> */}
              </div>
            </div>
            <div className={Style['wrap-item']}>
              <div className={Style['side']}>
                <div className={Style['title']}>
                  <Icon type='tag' />
                  <span>协议正文</span>
                </div>
              </div>
              <div className={Style['content']}>
                {/* <Form {...layoutForm}> */}
                <Item wrapperCol={{ span: 16, offset: 4 }}>
                  {getFieldDecorator('content', {
                    initialValue: editorState
                  })(<BraftEditor />)}
                </Item>
                {/* </Form> */}
                <Item wrapperCol={{ span: 16, offset: 4 }}>
                  <Button type='primary' onClick={this.handleSubmit} loading={loading}>提交</Button>
                </Item>
              </div>
            </div>
          </div>
        </div>
      </Form>
    )
  }
}

const mapState = state => ({
  loading: state.loading.effects.setup.addOrUpdateProtocol,
  protocolDetail: state.setup.protocolDetail
})
const mapDispatch = dispatch => ({
  addOrUpdateProtocol: dispatch.setup.addOrUpdateProtocol,
  getProtocolDetail: dispatch.setup.getProtocolDetail
})

const editForm = Form.create()(edit)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(editForm)
)
